<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      id="nav-bar"
      :is-back="true"
      :background="{ background: '#fff' }"
      :border-bottom="false"
      title="绑定账号"
    ></u-navbar>

    <view class="main-header">
      <u-search placeholder="请输入手机号搜索" v-model="keyword"></u-search>
    </view>

    <view class="content">
      <view class="formBox">
        <u-form :model="form" ref="uForm" label-width="140">
          <u-form-item label="手机号">
            <u-input
              class="input"
              input-align="right"
              v-model="form.phone"
              placeholder="请输入您的手机号"
            />
          </u-form-item>
          <u-form-item label="姓名">
            <u-input
              class="input"
              input-align="right"
              v-model="form.name"
              placeholder="请输入姓名"
            />
          </u-form-item>

          <u-form-item label="验证码" :border-bottom="false">
            <u-input
              class="input"
              input-align="right"
              placeholder="请输入验证码"
              v-model="form.code"
              type="text"
            ></u-input>
            <view slot="right" class="sendCodeBtn" @click="getCode">{{ codeTips }}</view>
          </u-form-item>
        </u-form>
      </view></view
    >
    <view class="btnBox">
      <view class="btn" @click="submit">确认绑定</view>
    </view>
    <u-verification-code
      seconds="60"
      ref="uCode"
      @change="codeChange"
    ></u-verification-code>
  </view>
</template>

<script>
import service from '@/common/service.js';
import util from '@/common/utils';
import md5 from '@/common/md5.js'; //md5加密
export default {
  data() {
    return {
      form: { phone: '', code: '', name: '' },
      canSubmit: false,
      codeTips: '获取验证码',
      keyword: '',
    };
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    handleLogin() {
      uni.navigateBack({
        delta: 1,
      });
    },
    codeChange(text) {
      this.codeTips = text;
    },
    // 获取验证码
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        if (!this.form.phone) {
          util.showToast('手机号不能为空');
          return;
        }
        if (!util.checkPhone(this.form.phone)) {
          util.showToast('手机号格式有误');
          return;
        }
        uni.showLoading({
          title: '正在获取验证码',
        });
        const that = this;
        const params = {
          phone: that.form.phone,
        };
        service.sendForgetPwdSmsCode(
          params,
          function (res) {
            if (res && res.data) {
              uni.hideLoading();
              util.showToast('验证码已发送');
              that.$refs.uCode.start();
            } else {
              util.showToast(res.message || '发送失败');
            }
          },
          function (res) {
            util.showToast(res.message || '发送失败');
          }
        );
      } else {
        util.showToast('倒计时结束后再发送');
      }
    },
    checkValue() {
      if (!this.form.phone) {
        util.showToast('手机号不能为空');
        return false;
      }
      if (!util.checkPhone(this.form.phone)) {
        util.showToast('手机号格式有误');
        return false;
      }
      if (!this.form.code) {
        util.showToast('验证码不能为空');
        return false;
      }
      this.canSubmit = true;
      return true;
    },
    submit() {
      if (!this.checkValue()) {
        return;
      }
      const that = this;
      const params = {
        phone: that.form.phone,
        smsCode: that.form.code,
      };
      service.memberSetForgetPwd(
        params,
        function (res) {
          if (res && res.data) {
            util.showToast('修改成功，正在跳转');
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 2000);
          } else {
            util.showToast(res.message || '修改失败');
          }
        },
        function (res) {
          util.showToast(res.message || '修改失败');
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 0 0 60rpx;
  background-color: #f5f5f5;
}

.main-header {
  width: 100%;
  padding: 10rpx 30rpx;
  background-color: #ffffff;
}

.content {
  margin-top: 30rpx;
  width: 100%;
  padding: 0 30rpx;
  .formBox {
    padding: 0 30rpx;
    background-color: #fff;
    border-radius: 10rpx;
  }

  .sendCodeBtn {
    width: 180rpx;
    font-size: 28rpx;
    font-weight: normal;
    color: #b7926e;
    text-align: right;
  }
}

.btnBox {
  position: absolute;
  left: 0;
  bottom: 74rpx;
  width: 100%;
  height: 88rpx;
  padding: 0 30rpx;
  .btn {
    line-height: 88rpx;
    font-size: 28rpx;
    font-weight: normal;
    color: #ffffff;
    background: linear-gradient(90deg, #332108, #201403);
    border-radius: 20rpx;
    text-align: center;
  }
}
</style>
